<template>
	<view class="team-list">
		<view class="box_nav">
			<text class="line" :style="'left:' + navIndex * 20 + '%'"></text>
			<view @click="changeIndex(index)" :class="navIndex == index ? 'active flex_center' : 'flex_center'" v-for="(item, index) in nav" :key="index">{{ item }}</view>
		</view>
		<view class="" v-if="list.length">
			<view class="team-item" v-for="(item,index) in list" :key="item.id" @click="$go(item.paymentstats == 10 ? './order-nopay?id=' + item.id :'./orderDetail?id=' + item.id)">
				<view class="item-title">
					<text class="left">订单编号：{{ item.orderNo }}</text>
					<text class="right">{{ item.paymentstats | formatePay }}</text>
				</view>
				<view class="item-main" v-for="cur in item.list" :key='cur.id'>
					<view class="left"><image style="width: 100%;height: 100%;" :src="cur.thumbnail" mode=""></image></view>
					<view class="right">
						<text class="right-title">{{cur.name}}</text>
						<text class="right-num">数量: {{cur.count}} 规格 {{cur.standardName}}</text>
						<text class="right-order">订单总计: ￥{{cur.price}}<text v-if="cur.score>0">+{{cur.score}}积分</text></text>
					</view>
				</view>
				<view class="item-bottom" @click.stop>
					<button type="default"  class="cancle" @click="cancleOrder(item,index)" v-if="item.paymentstats == 10">取消订单</button>
					<button type="default"  class="cancle" @click="sureGoods(item,index)" v-if="item.paymentstats == 30">确定收货</button>
					<button type="default" @click="$go(item.paymentstats == 10 ? './order-nopay?id=' + item.id :'./orderDetail?id=' + item.id)" class="cancle" v-if="item.paymentstats != 10">查看详情</button>
					<button type="default" class="pay" v-if="item.paymentstats == 10" @click="sure(item)">立即支付</button>
				</view>
			</view>
		</view>
		
		<view class="cart-empty" v-else>
		  <image src="../../../static/empt.png" mode=""></image>
		  <text class="empty">什么都没有~</text>
		  <button type="default" class="empty-btn" @click="$go('/pages/shop/goods-list')">去逛逛</button>
		</view>
		<pay :show="payShow" @close="payCloseFunc" @emitPassword="emitPassword"></pay>
	</view>
</template>

<script>
	import pay from '../../../components/payPassword/pay_Password.vue'
export default {
	data() {
		return {
			nav: ['全部订单', '待付款', '待发货', '待收货', '已完成'],
			navIndex: 0,
			pageIndex: 1,
			pageSize: 10,
			finish: false,
			payShow:false,
			yueObj:{},
			list: []
		};
	},
	components:{
		pay
	},
	filters: {
		formatePay(val) {
			switch (val) {
				case 10:
					return '待支付';
					break;
				case 20:
					return '待发货';
					break;
				case 30:
					return '待收货';
					break;
				case 40:
					return '已签收';
					break;
				case 50:
					return '系统取消';
					break;
				case 60:
					return '买家取消';
					break;
			}
		}
	},
	methods: {
		payCloseFunc() {
			this.payShow = false
		},
		cancleOrder(item,index){
			uni.showModal({
				title: '提示',
				content: '确定取消订单？',
				showCancel: true,
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if(res.confirm){
						this.$ajax('api/Order/Cancel',{id:item.id}).then(res => {
							uni.showToast({
								title: '取消成功'
							});
							this.list.splice(index,1)
						})
					}
				},
				fail: () => {},
				complete: () => {}
			});
			
		},
		sureGoods(item,index){
			uni.showModal({
				title: '提示',
				content: '确定签收？',
				showCancel: true,
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if(res.confirm){
						this.$ajax('api/Order/ConfirmReceipt',{id:item.id}).then(res => {
							uni.showToast({
								title: '签收成功'
							});
							// this.list.splice(index,1)
							this.list =[]
							this.pageIndex = 1
							this.navIndex = 4
							this.getlist()
						})
					}
				},
				fail: () => {},
				complete: () => {}
			});
			
		},
		emitPassword(e){
			this.$ajax('api/Member/VerificationPayPassword',{payPassword:e}).then(res => {
				this.$ajax('api/Order/Pay',this.yueObj).then(pose => {
					uni.showToast({
						title: '支付成功'
					});
					uni.navigateTo({
						url:'../user/order/order'
					})
				})
				this.payShow =false
			})
		},
		sure(item){
			let that = this
			uni.showActionSheet({
				itemList: ['余额支付','微信支付','购物券支付'],
				success: tap => {
					
					let obj = {
						id:item.id,
						category:10
					}
					if(tap.tapIndex == 0 || tap.tapIndex == 2){
						obj.category = tap.tapIndex == 0 ? 10 : 30
						that.yueObj = obj
						if(this.$store.state.isSetpassword){
							that.payShow = true
						}else{
							that.$ajax('api/Order/Pay',that.yueObj).then(pose => {
								uni.showToast({
									title: '支付成功'
								});
								that.pageIndex = 1
								that.navIndex = 2
								that.list = []
								that.getlist()
							})
						}
						// that.$ajax('api/Order/Pay',obj).then(pose => {
						// 	uni.showToast({
						// 		title: '支付成功'
						// 	});
						// 	uni.navigateTo({
						// 		url:'../user/order/order'
						// 	})
						// })
					}else{
						obj.category = 20
						that.$ajax('api/Order/Pay',obj).then(pose => {
							const result = pose.Data;
							uni.requestPayment({
								timeStamp: result.timeStamp,
								nonceStr: result.nonceStr,
								package: result.package,
								signType: result.signType,
								paySign: result.paySign,
							
								success: function(res) {
									uni.showToast({
										title: '支付成功',
										duration: 3000,
										icon: 'none'
									});
								that.pageIndex = 1
								that.navIndex = 2
								that.list = []
								that.getlist()
								},
								fail: function(err) {
									uni.showModal({
										content: '支付已取消',
										showCancel: false
									});
									console.log('fail:' + JSON.stringify(err));
								}
							});
						})
					}
					
				},
				fail: () => {},
				complete: () => {}
			});
		},
		getlist() {
			if(this.navIndex == 0){
				this.$ajax('api/Order/Query', { pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
					if (res.Data.list.length) {
						this.list = this.list.concat(
							res.Data.list.map(item => {
								item.checked = false;
								return item;
							})
						);
						this.pageIndex++;
						this.finish = false;
					} else {
						this.finish = true;
					}
					uni.hideLoading();
				});
			}else if(this.navIndex == 1){
				this.$ajax('api/Order/QueryPayment', { pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
					if (res.Data.list.length) {
						this.list = this.list.concat(
							res.Data.list.map(item => {
								item.checked = false;
								return item;
							})
						);
						this.pageIndex++;
						this.finish = false;
					} else {
						this.finish = true;
					}
					uni.hideLoading();
				});
			}else if(this.navIndex == 2){
				this.$ajax('api/Order/QueryToBeShipped', { pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
					if (res.Data.list.length) {
						this.list = this.list.concat(
							res.Data.list.map(item => {
								item.checked = false;
								return item;
							})
						);
						this.pageIndex++;
						this.finish = false;
					} else {
						this.finish = true;
					}
					uni.hideLoading();
				});
			}else if(this.navIndex == 3){
				this.$ajax('api/Order/QueryShipped', { pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
					if (res.Data.list.length) {
						this.list = this.list.concat(
							res.Data.list.map(item => {
								item.checked = false;
								return item;
							})
						);
						this.pageIndex++;
						this.finish = false;
					} else {
						this.finish = true;
					}
					uni.hideLoading();
				});
			}else if(this.navIndex == 4){
				this.$ajax('api/Order/QueryAlreadySigned', { pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
					if (res.Data.list.length) {
						this.list = this.list.concat(
							res.Data.list.map(item => {
								item.checked = false;
								return item;
							})
						);
						this.pageIndex++;
						this.finish = false;
					} else {
						this.finish = true;
					}
					uni.hideLoading();
				});
			}
		},
		changeIndex(index){
			uni.showLoading({
				title: '加载中',
				mask: true
			});
				this.list = []
				this.pageIndex = 1
				this.navIndex = index
			setTimeout(()=>{
				this.getlist()
			},500)
		}
	},
	onLoad(e){
		this.navIndex = e.index ? e.index : 0
	},
	onShow() {
		this.list = [];
		this.pageIndex = 1;
		this.getlist();
	},
	onReachBottom() {
		uni.showLoading({
			title: '加载中'
		});
		if (!this.finish) {
			this.getlist();
		} else {
			uni.hideLoading();
		}
	}
};
</script>

<style lang="scss">
	.cart-empty {
	  display: flex;
	  padding: 200rpx 0 0;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  image {
	    width: 160rpx;
	    height: 160rpx;
	  }
	  .empty {
	    color: #666666;
	    font-size: 22rpx;
	    margin-top: 40rpx;
	  }
	  .empty-btn {
	    width: 280rpx;
	    height: 70rpx;
	    background: #202029;
	    border-radius: 35rpx;
	    margin-top: 73rpx;
	    text-align: center;
	    line-height: 70rpx;
	    color: #ffffff;
	    font-size: 24rpx;
	  }
	}
.team-list {
	width: 100vw;
	min-height: 100vh;
	padding:0 0 1px 0;
	background-color: #e9eaed;
	.team-item {
		padding: 34rpx 30rpx;
		box-sizing: border-box;
		width: 690rpx;
		margin: 10rpx 0 0;
		background-color: #ffffff;
		border-radius: 26rpx;
		margin-left: 30rpx;
		margin-bottom: 24rpx;
		.item-title {
			display: flex;
			justify-content: space-between;
			// border-bottom: 1px solid #e8e8e8;
			.left {
				font-size: 26rpx;
				color: #333;
			}
			.right {
				font-size: 26rpx;
				color: #d3ab44;
			}
		}
		.item-main {
			box-sizing: border-box;
			    /* margin-top: 33.5rpx; */
			    display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    padding-top: 33.5rpx;
			    height: 193rpx;
			    border-bottom: 1px solid #e8e8e8;
			    /* border-top: 1px solid #e8e8e8; */
			    margin-bottom: 29.5rpx;
			.left {
				width: 125rpx;
				height: 125rpx;
				background-color: #c4c4c4;
				margin-right: 30rpx;
				image {
					width: 125rpx;
					height: 125rpx;
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				.right-title {
					font-size: 26rpx;
					color: #333333;
				}
				.right-num {
					margin-top: 27rpx;
					font-size: 22rpx;
					color: #999;
				}
				.right-order {
					font-size: 22rpx;
					color: #999;
					margin-top: 10rpx;
				}
			}
		}
		.item-bottom {
			display: flex;
			justify-content: flex-end;
			.cancle {
				width: 170rpx;
				height: 51rpx;
				background: #ffffff;
				border: 1rpx solid #cdcdcd;
				border-radius: 25rpx;
				color: #666666;
				font-size: 26rpx;
				line-height: 51rpx;
				margin: 0;
				margin-right: 37rpx;
			}
			.pay {
				width: 170rpx;
				height: 51rpx;
				background: #202029;
				border-radius: 25rpx;
				color: #fff;
				font-size: 26rpx;
				line-height: 51rpx;
				margin: 0;
			}
			&>button:last-child{
				margin-right: 0;
			}
		}
	}
}
.box_nav {
	height: 90rpx;
	background: #fff;
	display: flex;
	position: sticky;
	top: 0;
	left: 0;
	border-top: 1px solid #ededed;
	z-index: 999;
	& > .line {
		width: 20%;
		height: 2px;
		background: #d3ab44;
		position: absolute;
		bottom: 0;
		transition: all 0.5s;
	}
	& > view {
		width: 20%;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}
	& > .active {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}
}
</style>
